<template>
	<t-dialog :visible="visible" header="今日报价" :width="680" :footer="false" @update:visible="handleVisibleChange"
		@close="handleClose">
		<template #body>
			<t-space direction="vertical" size="large" style="width: 100%">
				<!-- 基本信息 -->
				<div class="info-section basic-info">
					<t-row :gutter="[16, 16]" justify="space-between">
						<t-col :span="12">
							<div class="info-item">
								<span class="label">名称：</span>
								<span class="value">{{ refineryData?.refineryName }}</span>
							</div>
							<div class="info-item">
								<span class="label">地址：</span>
								<span class="value">{{ refineryData?.province }}</span>
							</div>
						</t-col>
						<t-col :span="12" style="text-align: right;">
							<div class="info-item justify-end">
								<span class="label">报价时间：</span>
								<span class="value">{{ refineryData?.createTime }}</span>
							</div>
						</t-col>
					</t-row>
				</div>

				<!-- 库存信息 -->
				<div class="info-section inventory-info">
					<t-row :gutter="[16, 16]" justify="space-between" align="middle">
						<t-col :span="18">
							<t-row :gutter="[16, 16]">
								<t-col :span="8">
									<div class="info-item">
										<span class="label">历史报价：</span>
										<span class="value">{{ refineryData?.hisPrice }}</span>
									</div>
								</t-col>
								<t-col :span="8">
									<div class="info-item">
										<span class="label">可提库存：</span>
										<span class="value">{{ refineryData?.useStock }}KG</span>
									</div>
								</t-col>
								<!-- <t-col :span="8">
									<div class="info-item">
										<span class="label">已售库存：</span>
										<span class="value">19000.000KG</span>
									</div>
								</t-col> -->
							</t-row>
						</t-col>
						<!-- <t-col :span="6" style="text-align: right;">
							<t-button theme="primary">编辑库存</t-button>
						</t-col> -->
					</t-row>
				</div>

				<!-- 日期切换 -->
				<!-- <div class="date-section">
					<t-space align="center">
						<t-button variant="text" @click="changeDate(-1)">
							<template #icon><t-icon name="chevron-left" /></template>
						</t-button>
						<span class="date-text">{{ currentDate }} 日报价</span>
						<span class="history-text">历史报价</span>
						<span class="date-text link">{{ currentDate }} 日报价</span>
						<t-button variant="text" @click="changeDate(1)">
							<template #icon><t-icon name="chevron-right" /></template>
						</t-button>
					</t-space>
				</div> -->

				<!-- 报价表单 -->
				<t-form ref="form" :data="formData" :rules="rules" @submit="onSubmit">
					<!-- 92# -->
					<div class="price-input-section">
						<span class="price-label">{{ refineryData?.oilName }}</span>
						<t-form-item label="挂牌价" name="gpPrice" label-width="60px">
							<t-input-number v-model="formData.gpPrice" :style="{ width: '180px' }"
								placeholder="请输入" />
						</t-form-item>
						<!-- <t-form-item label="分销价" name="price92Distribution" label-width="60px">
							<t-input-number v-model="formData.price92Distribution" :style="{ width: '180px' }"
								placeholder="请输入" />
						</t-form-item> -->
					</div>

					<!-- 95# -->
					<!-- <div class="price-input-section">
						<span class="price-label">95#</span>
						<t-form-item label="挂牌价" name="price95Listed" label-width="60px">
							<t-input-number v-model="formData.price95Listed" :style="{ width: '180px' }"
								placeholder="请输入" />
						</t-form-item>
						<t-form-item label="分销价" name="price95Distribution" label-width="60px">
							<t-input-number v-model="formData.price95Distribution" :style="{ width: '180px' }"
								placeholder="请输入" />
						</t-form-item>
					</div> -->

					<!-- 提交按钮 -->
					<t-form-item style="margin-top: 32px;width: 100%; justify-content: flex-end;">
						<t-space size="small" style="width: 100%; justify-content: flex-end;">
							<t-button theme="primary" type="submit">确定</t-button>
						</t-space>
					</t-form-item>
				</t-form>
			</t-space>
		</template>
	</t-dialog>
</template>

<script setup lang="ts">
	import { ref, reactive,watch } from 'vue';
	import dayjs from 'dayjs';
	import { getRefineryOilTypeData } from '@/api/refinery.ts'

	interface RefineryData {
		refineryName : string;
		province : string;
		oilName : string;
		gpPrice : string;
		useStock : string;
		hisPrice : string;
		status : string;
	}

	const props = withDefaults(defineProps<{
		visible : boolean;
		refineryData : RefineryData;
	}>(), {
		visible: false,
		refineryData: () => ({
			refineryName: '',
			province: '',
			oilName: '',
			gpPrice: '',
			useStock: '',
			hisPrice: '',
			status: ''
		})
	});

	const emit = defineEmits<{
		(e : 'update:visible', visible : boolean) : void;
		(e : 'submit', data : any) : void;
	}>();

	// 表单数据
	const formData = reactive({
		gpPrice:props.refineryData?props.refineryData.gpPrice:0
	});
	
	// 表单校验规则
	const rules = {
		gpPrice: [{ required: true, message: '请输入挂牌价', type: 'number' }],
	};

	// 当前日期和时间
	const currentDate = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
	const currentTime = ref(dayjs().format('HH:mm:ss'));

	// 切换日期
	const changeDate = (offset : number) => {
		currentDate.value = dayjs(currentDate.value).add(offset, 'day').format('YYYY-MM-DD hh:mm:ss');
	};

	// 提交表单
	const onSubmit = ({ validateResult, firstError } : { validateResult : boolean; firstError ?: string }) => {
		if (validateResult === true) {
			if(props.refineryData.gpPrice){
				emit('submit', {
					createTime: currentDate.value,
					...formData,
					id:props.refineryData.id,
					hisPrice:props.refineryData.gpPrice,
					chgPrice:formData.gpPrice-props.refineryData.gpPrice
				});
			}else{
				emit('submit', {
					createTime: currentDate.value,
					...formData,
					id:props.refineryData.id,
				});
			}
			
			formData.gpPrice = ''
			handleClose();
		} else {
			console.log('Validation Error:', firstError);
		}
	};

	// 关闭弹窗
	const handleClose = () => {
		emit('update:visible', false);
	};

	// 处理visible变化
	const handleVisibleChange = (val : boolean) => {
		emit('update:visible', val);
	};
</script>


<style lang="less" scoped>
	.info-section {
		padding-bottom: 16px;
		border-bottom: 1px solid var(--td-component-border);

		&.basic-info {
			padding-bottom: 16px;
			border-bottom: none; // Basic info doesn't need bottom border if inventory follows
		}

		&.inventory-info {
			padding-top: 16px; // Add padding top if basic info has no border
			padding-bottom: 16px;
			border-bottom: 1px solid var(--td-component-border);
		}

		.info-item {
			display: flex;
			align-items: center;
			margin-bottom: 8px; // Add some space between items vertically

			&:last-child {
				margin-bottom: 0;
			}

			&.justify-end {
				justify-content: flex-end;
			}

			.label {
				color: var(--td-text-color-secondary);
				margin-right: 8px;
				white-space: nowrap;
			}

			.value {
				color: var(--td-text-color-primary);
				font-weight: 500;
				white-space: nowrap;
			}
		}
	}

	.date-section {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 24px 0;
		padding-bottom: 24px;
		border-bottom: 1px solid var(--td-component-border);

		.date-text {
			font-size: 16px;
			font-weight: 500;
			margin: 0 16px;
			color: var(--td-text-color-primary);

			&.link {
				color: var(--td-brand-color);
				cursor: pointer;
			}
		}

		.history-text {
			font-size: 16px;
			font-weight: 500;
			margin: 0 16px;
			color: var(--td-text-color-secondary);
		}
	}

	.price-input-section {
		display: flex;
		align-items: center;
		margin-bottom: 24px;
		gap: 24px; // Add gap between items

		.price-label {
			font-size: 16px;
			font-weight: 500;
			color: var(--td-text-color-primary);
			width: 40px; // Fixed width for alignment
			text-align: right;
			margin-right: 16px;
		}

		.t-form__item {
			margin-bottom: 0 !important; // Override default margin
		}
	}

	// Adjust t-form-item label style to be inline
	:deep(.t-form__item) {
		display: flex;
		align-items: center;

		.t-form__label {
			margin-right: 8px;
			white-space: nowrap;
			color: var(--td-text-color-secondary);
		}

		.t-form__controls {
			margin-left: 0 !important; // Override default margin
		}
	}
</style>